<template>
  <a-modal class="common-modal" :title="tipTitle|| $t('other.tips')" :footer="null" :width="420" :visible="visible" @cancel="handleCancel" :maskClosable="false" style="top:100px;" :keyboard="false">
    <a-spin :spinning="confirmLoading">
      <div class="common-modal-content">
        <section>
          <div class="tip-icon-box">
            <ExclamationCircleOutlined />
          </div>
          <div v-if="tipContent" v-html="tipContent"></div>
          <div v-else>{{$t('components.sureDel')}} </div>
        </section>
      </div>

      <div class="common-modal-footer no-border">
        <a-button @click="handleCancel" class="cancel">{{$t('common.cancel')}}</a-button>
        <a-button @click="handleOk" type="primary" class="confirm">{{confirmBtnText || $t('common.cancel')}}</a-button>
      </div>
    </a-spin>
  </a-modal>
</template>

<script setup >
import { ref } from 'vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
let props = defineProps({
  needCloseInner: {
    type: Boolean,
    default: () => true
  }
})
const emits = defineEmits(['ok'])
let tipTitle = ref(null)
let tipContent = ref(null)
let confirmBtnText = ref(null)
let isOperate = ref(true)
let visible = ref(false)
let confirmLoading = ref(false)
const open = async (obj) => {
  confirmLoading.value = false
  let { title, content, btnText, needOperate } = obj
  tipTitle.value = title
  tipContent.value = content
  confirmBtnText.value = btnText
  isOperate.value = needOperate
  visible.value = true

}
const handleOk = async () => {
  confirmLoading.value = true
  emits('ok', isOperate.value)
  if (props.needCloseInner) visible.value = false
}
const handleCancel = () => {
  if (confirmLoading.value) return
  visible.value = false
  confirmLoading.value = false
}


defineExpose({
  open,
  visible,
  confirmLoading
})
</script>
